<template>
  <el-form :model="form" label-width="auto" :rules="rules" ref="userForm" class="mb-4 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realname">
        <el-input v-model="form.realname" placeholder="请输入真实姓名" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="QQ号码" prop="qq">
        <el-input v-model="form.qq" placeholder="请输入QQ号码" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="正常" value="normal" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option label="管理员" value="admin" />
          <el-option label="用户" value="user" />
        </el-select>
      </el-form-item>
    </div>
    <div class="mt-4 flex justify-center gap-8">
      <el-button type="primary" @click="resetForm">重置</el-button>
      <el-button type="success" @click="submitForm">确定</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        username: '',
        realname: '',
        phone: '',
        email: '',
        qq: '',
        idCard: '',
        status: '',
        role: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
      }
    };
  },
  watch: {
    user: {
      handler(newUser) {
        this.form = { ...newUser }; // 更新表单数据
      },
      immediate: true, // 立即执行一次
    },
  },
  methods: {
    async submitForm() {
      try {
        const valid = await this.$refs.userForm.validate();
        if (valid) {
          this.$emit('submit', this.form);
        } else {
          console.error('创建用户失败：表单验证未通过');
        }
      } catch (error) {
        console.error('创建用户失败:', error);
      }
    },
    resetForm() {
      this.form = {
        username: '',
        realname: '',
        phone: '',
        email: '',
        qq: '',
        idCard: '',
        status: '',
        role: '',
      };
      this.$emit('reset');
    },
  },
};
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>